<template>
	<view class="font">
		<view class="img-a">
			<view class="t-b">
				欢迎来到
				<br />
				EM综合能源智慧管理终端
			</view>
		</view>
		<view class="login-view">
			<view class="t-login">
				<cc-loginTabs :selIndex="type" :tabs-arr="tabArr" @tabClick="tabClick"></cc-loginTabs>
				<form class="cl">
					<view class="t-a">
						<!-- <input type="text" name="text" placeholder="请输入公司名称" v-model="loginInfo.username" /> -->

						<u-field v-model="loginInfo.company" label-width="0" clearable icon="home" icon-color="#c8c9cc" placeholder="请输入公司名称"></u-field>
					</view>
					<view class="t-a">
						<u-field v-model="loginInfo.username" label-width="0" clearable icon="phone" icon-color="#c8c9cc" placeholder="请输入用户名"></u-field>
					</view>
					<view class="t-a u-m-b-30">
						<u-field v-model="loginInfo.password" type="password" label-width="0" icon-color="#c8c9cc" clearable icon="lock" placeholder="请输入密码"></u-field>
					</view>
					<!-- agree：是否同意勾选  protocolArr：协议数组 @click：勾选同意点击 @protocolClick：协议点击 -->

					<!-- <cc-protocolBox :agree="loginInfo.agree" :protocolArr="protocolArr" @click="loginInfo.agree = !loginInfo.agree" @protocolClick="protocolClick"></cc-protocolBox> -->
					<!-- #ifdef MP-WEIXIN -->
					<zero-privacy :onNeed="true"></zero-privacy>
					<!-- #endif -->
					<button @tap="login()">登 录</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			onNeed: true,
			loginInfo: {
				// company: '恩曼', //公司名称
				// username: 'guojing', //手机号码
				// password: '123456', //密码
				company: '', //公司名称
				username: '', //手机号码
				password: '', //密码
				agree: false
			},
			protocolArr: ['<用户登录协议>', '<用户隐私协议>'],
			tabArr: ['账号登录'],
			type: 0
		};
	},
	onLoad() {},
	onShow() {
		const HBinfo = uni.getStorageSync('HBinfo');
		if (HBinfo) {
			this.loginInfo = HBinfo;
		}
	},
	methods: {
		...mapMutations(['setUserInfo']),
		login() {
			let that = this;
			if (!that.loginInfo.company) {
				uni.showToast({
					title: '请输入您的公司名称',
					icon: 'none'
				});
				return;
			}
			if (!that.loginInfo.username) {
				uni.showToast({
					title: '请输入您的用户名',
					icon: 'none'
				});
				return;
			}
			if (!that.loginInfo.password) {
				uni.showToast({
					title: '请输入您的密码',
					icon: 'none'
				});
				return;
			}
			that.$http
				.get('index/login', that.loginInfo, {
					load: false
				})
				.then((res) => {
					uni.setStorageSync('HBinfo', that.loginInfo);
					that.setUserInfo(res.data);
					uni.switchTab({
						url: '/pages/index/index'
					});
				})
				.catch(() => {
					//联网失败, 结束加载that.mescroll.endErr();
				});
		},
		protocolClick(tag) {
			console.log('点击协议序列 = ' + tag);

			this.onNeed = true;
		},
		// tab点击序列赋值
		tabClick(tag) {
			this.type = tag;
		}
	}
};
</script>

<style lang="scss">
.txt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.img-a {
	width: 100%;
	height: 699rpx;
	background-image: $login_bg_base64_code;
	background-size: 100%;
	background-repeat: no-repeat;
	.t-b {
		text-align: left;
		font-size: 42rpx;
		color: #ffffff;
		padding: 130rpx 0 0 70rpx;
		font-weight: bold;
		line-height: 70rpx;
	}
}
.login-view {
	width: 91.3%;
	margin: 0 auto;
	position: relative;
	margin-top: -390rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}
	.t-login {
		width: 100%;
		box-sizing: border-box;
		font-size: 28rpx;
		padding: 80rpx 30rpx;
		.uni-input-placeholder {
			color: #c0c4cc;
		}
		button {
			font-size: 28rpx;
			background: #2796f2;
			color: #fff;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 50rpx;
			font-weight: bold;
		}
		.t-a {
			position: relative;
			font-size: 32rpx;
		}
		input,
		.u-input {
			height: 90rpx;
			line-height: 90rpx;
			// margin-bottom: 20rpx;
			border-bottom: 1px solid #e4e4e4;
			/* #ifdef MP-WEIXIN */
			border-bottom: 0;
			/* #endif */
			font-size: 28rpx;
		}
		.t-d {
			text-align: center;
			color: #999;
			margin: 80rpx 0;
		}

		.t-e {
			text-align: center;
			width: 250rpx;
			margin: 80rpx auto 0;
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.t-g {
			float: left;
			width: 50%;
		}
		.t-f {
			text-align: center;
			margin: 150rpx 0 0 0;
			color: #666;
			text {
				margin-left: 20rpx;
				color: #aaaaaa;
				font-size: 27rpx;
			}
		}
	}
}
</style>
